<template>
	<view>
		<view class="cont">
			<view class="ts1">{{info.title}}</view>
			<view class="ts2">发布时间：{{info.createTime}}</view>
		</view>
		<view class="cont_f">
			<mp-html :content="info.content" />
		</view>
		<view class="btns" @click="open">
			立即报名
		</view>
		<uni-popup type="bottom" ref="popup" :safe-area="false">
			<view class="popup">
				<view class="right_text" @click="close">
					取消
				</view>
				<view class="flex_f">
					<view class="ts1">姓名</view>
					<input v-model="params.userName" type="text" placeholder="请输入姓名" />
				</view>
				<view class="flex_f">
					<view class="ts1">电话</view>
					<input v-model="params.userPhone" type="number" maxlength="11" placeholder="请输入电话" />
				</view>
				<view class="flex_f" style="border: none;">
					<view class="ts1">行业</view>
					<input v-model="params.userIndustry" type="text" placeholder="请输入行业" />
				</view>
				<view class="btns" @click="tj">
					确认提交
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		getTradeInfo,
		Tradefb
	} from '@/common/http.api.js';
	export default {
		data() {
			return {
				info: {},
				params: {
					tradeShowId: '',
					userName: '',
					userPhone: '',
					userIndustry: '',
				}
			};
		},
		onLoad(e) {
			this.params.tradeShowId = e.id
			getTradeInfo({
				id: e.id
			}).then(res => {
				this.info = res.data
			})
		},
		methods: {
			tj() {
				if (this.params.userName == '') {
					uni.showToast({
						title: '请输入联系人',
						duration: 2000,
						mask: false,
						icon: "none"
					})
				} else if (this.params.userPhone == '') {
					uni.showToast({
						title: '请输入电话',
						duration: 2000,
						mask: false,
						icon: "none"
					})

				} else if (this.params.userIndustry == '') {
					uni.showToast({
						title: '请输入你的行业',
						duration: 2000,
						mask: false,
						icon: "none"
					})
				} else {
					Tradefb(this.params).then(res => {
						uni.showToast({
							title: '报名成功',
							duration: 2000,
							mask: false,
							icon: "none"
						})
						this.params.userName = ''
						this.params.userPhone = ''
						this.params.userIndustry = ''
						this.$refs.popup.close()
					})
				}
			},
			open() {
				this.$refs.popup.open()
			},
			close() {
				this.$refs.popup.close()
			}
		}
	}
</script>

<style lang="less">
	page {
		background-color: #F0F0F1;
	}

	.cont {
		padding: 40rpx;

		.ts1 {
			margin: 20rpx auto 30rpx;
			text-align: center;
			color: #1A4878;
			font-weight: bold;
			font-size: 40rpx;
			border-bottom: 1px solid #888888;
			padding-bottom: 20rpx;
		}

		.ts2 {
			color: #666666;
			font-size: 26rpx;
			line-height: 48rpx;
		}
	}

	.cont_f {
		width: 100%;
		padding: 20rpx;
		box-sizing: border-box;
		background-color: #fff;
	}

	.btns {
		position: fixed;
		width: 652rpx;
		height: 80rpx;
		background-color: #022B5F;
		font-size: 30rpx;
		text-align: center;
		line-height: 80rpx;
		border-radius: 40rpx;
		color: #fff;
		bottom: 60rpx;
		left: 50%;
		transform: translateX(-50%);
	}

	.popup {
		height: 540rpx;
		background-color: #fff;
		width: 100%;
		padding: 30rpx 34rpx;
		box-sizing: border-box;

		.right_text {
			text-align: right;
		}

		.flex_f {
			display: flex;
			border-bottom: 1px solid #eee;
			padding-bottom: 30rpx;
			margin: 20rpx auto;

			.ts1 {
				font-size: 32rpx;
				margin-right: 20rpx;
			}

			input {
				flex: 1;
				font-size: 30rpx;
			}
		}
	}
</style>